<template>
  <div class="wrap">
    <div class="container w">
      <!-- 搜索 -->
      <van-search
        v-model="searchValue"
        show-action
        disabled
        shape="round"
        background="#1989fa"
        placeholder="请输入搜索关键词"
        @click="$router.push('/search')"
      >
        <template #action>
          <div @click="$router.push('/search')">
            <div class="search-publish">
              <i class="iconfont icon-jia"></i>
              <!-- 发布 -->
            </div>
          </div>
        </template>
      </van-search>
      <!-- 标签栏 -->
      <van-tabs v-model="tabsActive" swipeable>
        <div slot="nav-right" style="width: 33px; flex-shrink: 0"></div>
        <div
          slot="nav-right"
          @click="isChannelEditShow = true"
          class="wap-nav-wrap"
        >
          <van-icon name="wap-nav" />
        </div>
        <!-- <template #nav-right></template> -->
        <van-tab
          v-for="channel in allchannels"
          :title="channel.name"
          :key="channel.id"
        >
          <!-- 频道列表 -->
          <ArticleList :config="config" :data="articleList"/>
        </van-tab>
      </van-tabs>
    </div>
    <!-- 编辑频道弹出层 -->
    <van-popup
      v-model="isChannelEditShow"
      position="bottom"
      closeable
      close-icon-position="top-left"
      :style="{ height: '100%' }"
      get-container="body"
    >
      <ChannelEdit
        :user-channels="userChannels"
        :all-channels="allchannels"
        :active="tabsActive"
        @close="isChannelEditShow = false"
        @update-active="tabsActive = $event"
      />
    </van-popup>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getItem } from '@/utils/storage'
import { getChannels, getUserChannels } from '@/api/home'
import { getArticleList } from '@/api/article'
import ChannelEdit from '@/views/Home/components/channel-edit.vue'
// import ArticleList from '@/views/Home/components/article-list.vue'
import ArticleList from '@/components/Article/Article-item.vue'

export default {
  name: 'Home',
  components: {
    ArticleList,
    ChannelEdit
  },
  data () {
    return {
      isChannelEditShow: false,
      searchValue: '',
      tabsActive: 0,
      allchannels: [],
      userChannels: [],
      articleList: {},
      config: {
        showAuthorName: true,
        showRead: true,
        // showAvatar: true
        one: true,
        two: true,
        three: true,
        zero: true,
        showTime: true,
        showAvatar: false
      }
    }
  },
  created () {
    this.getAllChannels()
    this.getUserChannels()
    this.getArticleList()
  },
  computed: {
    ...mapGetters(['token'])
  },
  methods: {
    // 获取所有频道数据
    async getAllChannels () {
      this.allchannels = await getChannels().data
    },
    // 获取用户频道
    async getUserChannels () {
      let channels = []
      if (this.token) {
        // 用户登录了 请求获取线上的数据
        this.allchannels = await getUserChannels().data
      } else {
        // 没有登录 , 判断是否有本地存储的频道数据
        const localChannels = getItem('user-channels')
        // 如果有本地数据 则 使用
        if (localChannels) {
          channels = localChannels
        } else {
          // 用户没有登录，也没有本地存储的频道，那就请求获取默认推荐的列表
          this.allchannels = await getUserChannels().data
        }
      }
      this.userChannels = channels
    },
    async getArticleList () {
      const res = await getArticleList({ pageNum: 1, pageSize: 10 })
      this.articleList = res
    }
  }
}
</script>
<style lang="scss" scoped>
.search-publish {
  color: #fff;
  height: 33px;
  padding: 0 5px 0 10px;
  .icon-jia {
    font-size: 22px;
  }
}
.wap-nav-wrap {
  position: fixed;
  right: 0;
  height: 44px;
  line-height: 44px;
  background-color: #fff;
  opacity: 0.9;
  width: 33px;
}
</style>
